<script setup lang="ts">
import {onMounted, reactive} from "vue";
import {DescData} from "@arco-design/web-vue";
import {getInvoiceStruct} from "@/api/invoiceController.ts";

const props = defineProps({
  invoiceId: {
    type: String,
    required: true
  }
})

const fieldDict = {
  "invoiceCode": "发票代码",
  "invoiceDate": "开票日期",
  "purchaserRegisterNum": "买方识别号",
  "invoiceTypeOrg": "开票机构",
  "amountInFiguers": "金额",
  "totalAmount": "不含税金额",
  "totalTax": "总税额",
  "purchaserName": "买方名称",
  "invoiceType": "发票类型",
  "sellerAddress": "卖方地址",
  "sellerRegisterNum": "卖方识别号"
}

const data = reactive<DescData[]>([
  {
    label: '发票代码',
    value: ''
  },
  {
    label: '开票日期',
    value: ''
  },
  {
    label: '买方识别号',
    value: ''
  },
  {
    label: '开票机构',
    value: ''
  },
  {
    label: '金额',
    value: ''
  },
  {
    label: '不含税金额',
    value: ''
  },
  {
    label: '总税额',
    value: ''
  },
  {
    label: '买方名称',
    value: ''
  },
  {
    label: '发票类型',
    value: ''
  },
  {
    label: '卖方地址',
    value: ''
  },
  {
    label: '卖方识别号',
    value: ''
  }
])

const getDescData = () => {
  if(!props.invoiceId) return
  getInvoiceStruct(props.invoiceId).then((res: any) => {
    Object.keys(res).forEach(key => {
      const item = data.find(item => item.label === fieldDict[key])
      if(item) {
        item.value = res[key] || '--'
      }
    })
  })
}

onMounted(() => {
  getDescData()
})
</script>

<template>
  <div class="main">
    <a-descriptions :data="data" :column="1" />
  </div>
</template>

<style scoped lang="scss">
.main {
  padding: 20px;
}
</style>